<template>
  <el-form :model="form" label-width="120px">
    <el-form-item label="学生学号">
      <el-select v-model="form.student_id" filterable placeholder="请选择学生">
        <el-option 
          v-for="student in students" 
          :key="student.id" 
          :label="`${student.student_id} - ${student.name}`" 
          :value="student.student_id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="课程名">
      <el-select v-model="form.course_id" filterable placeholder="请选择课程">
        <el-option 
          v-for="course in courses" 
          :key="course.course_id" 
          :label="course.course_name" 
          :value="course.course_id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="平时成绩">
      <el-input v-model="form.usual_score" />
    </el-form-item>
    <el-form-item label="期末成绩">
      <el-input v-model="form.final_score" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">确认添加</el-button>
      <el-button @click="closeDialog">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import ScoreApi from '@/api/ScoreApi';

export default {
  data() {
    return {
      form: {
        student_id: '',
        course_id: '',
        usual_score: '',
        final_score: '',
      },
      courses: [], // 课程数据
      students: [] // 学生数据
    };
  },
  methods: {
    submitForm() {
      this.$emit('submit-form', this.form);
    },
    closeDialog() {
      this.$emit('close-dialog');
    },
    async fetchCourses() {
      try {
        const response = await ScoreApi.getCoursesForm();
        this.courses = response.data.data || response.data;
      } catch (error) {
        console.error("课程信息获取错误:", error);
        this.$message.error('获取课程信息失败');
      }
    },
    async fetchStudents() {
      try {
        const response = await ScoreApi.getStudents(); // 假设有这个方法
        this.students = response.data.data || response.data;
      } catch (error) {
        console.error("学生信息获取错误:", error);
        this.$message.error('获取学生信息失败');
      }
    }
  },
  created() {
    this.fetchCourses();
    this.fetchStudents();
  }
};
</script>